<template>
  <div id="hiddenRecored">
          <el-form :label-position="labelPosition" ref="form" :model="form">
              <div style="display:flex;flex-wrap:wrap;">
                 <el-form-item label-width="90px" label="用户查询 :">
                   <el-input style="width:150px;" placeholder="用户查询" v-model="form.userName"></el-input>
                </el-form-item>
                 <el-form-item label-width="90px" style="margin-left:15px;" label="交易方式 :">
                      <el-select style="width:120px;" class="ptop" placeholder="交易方式" v-model="form.way">
                        <el-option label="银行卡" value="0"></el-option>
                        <el-option label="支付宝" value="1"></el-option>
                        <el-option label="微信"   value="2"></el-option>
                        <el-option label="全部"   value=""></el-option>
                      </el-select>
                </el-form-item>
                 <el-form-item label-width="90px" style="margin-left:15px;" label="时间查询 :">
                  <el-date-picker style="width:160px;" @change="changeDate1" placeholder="开始时间" type="date" v-model="form.beginDate"></el-date-picker>
                  <span>~</span>
                  <el-date-picker style="width:160px;" class="ptop" @change="changeDate2" placeholder="结束时间" type="date" v-model="form.endDate"></el-date-picker>
                </el-form-item>
                <el-button type="info" @click="resetAll" style="margin-left:20px;height:40px">重置</el-button>
               <el-button type="primary" @click="getpreData" style="margin-left:10px;height:40px">查询</el-button>
              </div>
          </el-form>
        <el-tabs type="border-card">
          <el-tab-pane label="充值记录" @click="getRecListData">
                  <el-table
                  :data="RechargeRecored.list"
                  style="width: 100%">
                  <el-table-column
                  type="index"
                  label="序号"
                  width="80">
                </el-table-column>
                <el-table-column
                    label="用户编号"
                    prop="userCode"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="用户名"
                    prop="userName"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="交易方式"
                    prop="way"
                    width="140">
                    <template slot-scope="scope">
                      {{ paymentStatus(scope.row.way) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="充值金额"
                    prop="money"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="充值数量"
                    prop="number"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="充值时间"
                    prop="time"
                    width="200">
                  </el-table-column>
                  <!--筛选-->
                  <el-table-column
                    label="当前状态"
                    prop="status"
                      :filters="[{ text: '待交易', value: '待交易' }, 
                                { text: '交易中', value: '交易中' },
                                { text: '交易成功', value: '交易成功' },
                                { text: '交易失败', value: '交易失败' }]"
                      :filter-method="filterstatus"
                      placement="right">
                      <template slot-scope="scope">
                        <el-button type="text" @click="alterRecListStatus(scope.row)">{{pay(scope.row.status)}}</el-button>
                      </template>
                  </el-table-column>
                </el-table>
                <!--分页-->
                <div style="float:right">
                   <el-pagination @current-change="handleCurrentChange"
                                :current-page.sync="RechargeRecored.pageNumber"
                                :page-size="RechargeRecored.pageSize"
                                layout="total, prev, pager, next"
                                :total="RechargeRecored.totalRow">
                  </el-pagination>
                </div>
                <!--提示框-->
                <el-dialog title="修改用户当前状态" :visible.sync="dialogFormVisible1">
                  <el-form  ref="form" :model="form">
                    <el-form-item label="用户编号" :label-width="formLabelWidth">
                      <el-input v-model="RecListStatus.userCode"  auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="RecListStatus.userName"  auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户状态">
                    <template>
                        <el-radio-group v-model="RecListStatus.status">
                          <el-radio label="待交易"></el-radio>
                          <el-radio label="交易中"></el-radio>
                          <el-radio label="交易成功"></el-radio>
                          <el-radio label="交易失败"></el-radio>>
                        </el-radio-group>
                    </template>  
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="exit1">取 消</el-button>
                    <el-button type="primary" @click="saveRecListStatus">确 定</el-button>
                  </div>
              </el-dialog>
          </el-tab-pane>
        <el-tab-pane label="兑换记录" @click="getdrawListData">
                  <el-table
                  :data="withdrawRecored.list"
                  style="width: 100%">
                  <el-table-column
                  type="index"
                  label="序号"
                  width="80">
                </el-table-column>
                <el-table-column
                    label="用户编号"
                    prop="userCode"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="用户名"
                    prop="userName"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="商品"
                    prop="propName"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="兑换数量"
                    prop="number"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="物品总金额"
                    prop="countNumber"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="兑换时间"
                    prop="time"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    label="当前状态"
                    prop="status"
                      :filters="[{ text: '待交易', value: '待交易' }, 
                                { text: '交易中', value: '交易中' },
                                { text: '交易成功', value: '交易成功' },
                                { text: '交易失败', value: '交易失败' }]"
                      :filter-method="filterstatus"
                      placement="bottom">
                      <template slot-scope="scope">
                        <el-button type="text" @click="alterDrawListStatus(scope.row)">{{pay(scope.row.status)}}</el-button>
                      </template>
                  </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination @current-change="handleCurrentChange"
                                :current-page.sync="withdrawRecored.pageNumber"
                                :page-size="withdrawRecored.pageSize"
                                layout="total, prev, pager, next"
                                :total="withdrawRecored.totalRow">
                </el-pagination>
                <!--提示框-->
                <el-dialog title="修改用户当前状态" :visible.sync="dialogFormVisible2">
                  <el-form  ref="form" :model="form">
                    <el-form-item label="用户编号" :label-width="formLabelWidth">
                      <el-input v-model="DrawListStatus.userCode"  auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="DrawListStatus.userName"  auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户状态">
                      <template>
                          <el-radio-group v-model="DrawListStatus.status">
                            <el-radio label="待交易"></el-radio>
                            <el-radio label="交易中"></el-radio>
                            <el-radio label="交易成功"></el-radio>
                            <el-radio label="交易失败"></el-radio>>
                          </el-radio-group>
                      </template>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="exit2">取 消</el-button>
                    <el-button type="primary" @click="saveDrawListStatus">确 定</el-button>
                  </div>
              </el-dialog>
          </el-tab-pane>
    </el-tabs>
    
  </el-form>

  </div>
</template>
<script>
import paymentStatus from '../server/payment'
import pay from '../server/paystatus'
import axios from 'axios'
  export default {
    data() {
      return {
        labelPosition: 'left',
        form: {
          way:'',
          userName:'',
          beginDate:'',
          endDate:'',
          pageSize: 4,
          pageNumber: 1,
          lottertyId: undefined
        },
         withdrawRecored:{list:[]},
         RechargeRecored:{list:[]},
         paymentStatus:paymentStatus,
         pay:pay,
         RecListchange:'',//传个后台改完后的数据
         RecListStatus:'',
         DrawListchange:'',//传个后台改完后的数据
         DrawListStatus:'',
         dialogFormVisible1: false,
         dialogFormVisible2: false,
         formLabelWidth: '120px'
      }
    },
     created () {  
        this.getpreData();
        
    },
    methods: {
      // 重置方法
      resetAll(){
         this.form.userName = '';
         this.form.way = '';
         this.form.beginDate = '';
         this.form.endDate = '';
      },
      //弹窗
      alterRecListStatus(row){
        this.RecListStatus = row;
        this.RecListStatus.status = pay(row.status);
        var obj = {};
        obj.status = this.RecListStatus.status;
        obj.id = this.RecListStatus.id;
        this.RecListchange = obj;
        this.dialogFormVisible1 = true;
      },
      alterDrawListStatus(row){
        this.DrawListStatus = row;
        this.DrawListStatus.status = pay(row.status);
        var obj = {};
        obj.status = this.DrawListStatus.status;
        obj.id = this.DrawListStatus.id;
        this.DrawListchange = obj;
        this.dialogFormVisible2 = true;
      },
      //保存充值修改状态
      saveRecListStatus(){
        this.RecListchange.status = this.RecListStatus.status;
        if(this.RecListchange.status=='待交易'){
           this.RecListchange.status = 0;
        }
         if(this.RecListchange.status=='交易中'){
           this.RecListchange.status = 1;
        }
         if(this.RecListchange.status=='交易成功'){
           this.RecListchange.status = 2;
        }
         if(this.RecListchange.status=='交易失败'){
           this.RecListchange.status = 3;
        }
        this.$api.alterRecStu(this.RecListchange).then(res => {
          if (res.code === '000000') {
            this.$message.success('修改成功')
            this.getRecListData()
            this.dialogFormVisible1 = false
          }
        })
      },
       //保存兑换修改状态
      saveDrawListStatus(){
        this.DrawListchange.status = this.DrawListStatus.status;
        if(this.DrawListchange.status=='待交易'){
           this.DrawListchange.status = 0;
           con 
        }
         if(this.DrawListchange.status=='交易中'){
           this.DrawListchange.status = 1;
        }
         if(this.DrawListchange.status=='交易成功'){
           this.DrawListchange.status = 2;
        }
         if(this.DrawListchange.status=='交易失败'){
           this.DrawListchange.status = 3;
        }
        this.$api.alterDrawStu(this.DrawListchange).then(res => {
          if (res.code === '000000') {
            this.$message.success('修改成功')
            this.getdrawListData()
            this.dialogFormVisible2 = false
          }
        })
      },
      // 查询方法
      getpreData() {
        // 充值记录
            this.tab(this.form.beginDate,this.form.endDate);
            this.getRecListData();
            this.getdrawListData();
      },
      //充值记录
     getRecListData(){
       this.$api.recharge(this.form).then(res=>{
            if(res.code=='000000'){
              this.RechargeRecored = res.data
              if(this.RechargeRecored.list.length==0){
                
              } 
            }
          });
     },
     //兑换记录
     getdrawListData(){
         this.$api.withdrawal(this.form).then(res=>{
            if(res.code=='000000'){
                  this.withdrawRecored = res.data 
                  if(this.withdrawRecored.list.length==0){
                    this.$alert('您所查询的内容不存在！！！', '查询错误', {dangerouslyUseHTMLString: true});
                } 
              }
          });  
          this.withdrawRecored.list.forEach((item)=>{
                    if(item.propName=='4')
                      item.propName='房卡'
                    else if(item.propName=='5')
                      item.propName='门票' 
                    else if(item.propName=='6')
                      item.propName='宝石' 
                      
          })
     },handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getpreData()
      },
      //转时间戳
      changeDate1 (val) {
        val ? this.form.beginDate = Date.parse(val) : this.form.beginDate = undefined
      },
      changeDate2 (val) {
        val ? this.form.endDate = Date.parse(val) : this.form.endDate = undefined
      },
      formatter(row, column) {
        return row.userCode;
      },
      filterstatus(value, row) {
        return pay(row.status) === value;
      },
      exit1(){
        this.dialogFormVisible1 = false
        this.getRecListData()
      },
      exit2(){
        this.dialogFormVisible2 = false
        this.getdrawListData()
      },
      tab(date1,date2){
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if(oDate1.getTime() > oDate2.getTime()){
            this.$alert('您设置的时间范围不正确，请重新输入正确的时间范围', '查询错误', {dangerouslyUseHTMLString: true});
        } else {
            return
        }
      },
    }
    
  }
</script>
<style>
#hiddenRecored{
  min-width:1100px;
  margin:10px 20px;
}
#hiddenRecored .ptop{
      width:90px;
    }
    #hiddenRecored .el-input__inner{
    width:100%!important;
  }
</style>